<template>
  <div class="details">
    <div class="container-wrap">
      <div class="container container-message container-details">
        <div class="contar-wrap">
          <div class="item">
            <div class="item-box layer-photos-demo1 layer-photos-demo">
              <h3>
                <a>{{newsInfo.newsTitle}}</a>
              </h3>
              <div class="headerInfo">
                <h5>
                  发布于：
                  <span>{{newsInfo.newsTime|timestampToTime}}</span>
                </h5>
                <h5 class="userName">发布人:{{newsInfo.userName}}</h5>
              </div>
              <p v-html="newsInfo.newContent"></p>
              <p class="img-body">
                <img v-for="(url, index) in newsInfo.newsImg" :key="index" :src="url" class="img" />
              </p>
              <div class="count layui-clear">
                <span class="pull-left">
                  阅读
                  <em>{{newsInfo.newsWatch}}</em>
                </span>
                <span class="pull-right like">
                  <like @getArticleDetail="getArticleDetail" :likeInfo="newsInfo" type="news"></like>
                </span>
              </div>
            </div>
          </div>
          <el-input type="textarea" :rows="4" v-model="commBody" placeholder="说点什么"></el-input>
          <div class="btn-comm">
            <el-button plain @click="addComm">评论</el-button>
          </div>
          <div class="comt">
            <a href="javascript:;" class="pull-left">评论总数:{{commCount}}</a>
          </div>
          <div class="LAY-msg-box">
            <div class="info-item" v-for="(comm, index) in commList" :key="index">
              <img class="info-img" :src="comm.userUrl" />
              <div class="info-text">
                <p class="title">
                  <span class="name">{{comm.userName}}</span>
                  <span class="pull-right like">
                    <like @getArticleDetail="getArticleDetail" :likeInfo="comm" type="comm"></like>
                  </span>
                </p>
                <p class="info-intr">{{comm.commCom}}</p>
              </div>
            </div>
          </div>
        </div>
      </div>
      <div class="footerPage">
        <el-pagination
          background
          :total="commCount"
          @size-change="handleCurrentChange"
          @current-change="handleCurrentChange"
          :page-size="pageLine.limit"
        ></el-pagination>
      </div>
      <div class="down">
        <countDown
          ref="countDown"
          :fire="fire"
          time="5"
          :tiping="tiping"
          :tipend="tipend"
          @onEnd="onEnd"
          :width="100"
          :height="100"
        />
      </div>
    </div>
  </div>
</template>

<script>
import like from "../Comm/like";
import countDown from "vue-canvas-countdown";
import {
  newsInfo_user,
  commList_user,
  addComment_user,
  addWatch_user
} from "../../ajax/index";
export default {
  components: {
    like,
    countDown
  },
  data() {
    return {
      commBody: "",
      newsInfo: {},
      newsId: 0,
      pageLine: {
        page: 1,
        limit: 6,
        newsId: 0
      },
      commList: [],
      commCount: 0,
      fire: 0,
      tiping: {
        text: "倒计时进行中",
        color: "#fff"
      },
      tipend: {
        text: "倒计时结束",
        color: "#fff"
      }
    };
  },
  created() {
    this.newsId = this.$route.query.newsId;
    this.pageLine.newsId = this.$route.query.newsId;
    this.getNewsInfo();
    this.getCommList();
  },
  methods: {
    getArticleDetail(param) {
      if (param.type == "news") {
        if (this.newsInfo.isCollection) {
          this.newsInfo.newsCollection--;
        } else {
          this.newsInfo.newsCollection++;
        }
        this.newsInfo.isCollection = !this.newsInfo.isCollection;
      } else {
        let obj = this.commList.find(item => item.commId == param.id);
        if (obj.isCollection) {
          obj.commCollection--;
        } else {
          obj.commCollection++;
        }
        obj.isCollection = !obj.isCollection;
      }
    },
    getNewsInfo() {
      newsInfo_user({
        newsId: this.newsId
      })
        .then(res => {
          if (res.code) {
            this.newsInfo = res.data;
            let userId = this.$store.getters["getuserInfo"].userId;
            if (!this.newsInfo.isWatch && userId) {
              this.fireCD();
            }
          }
        })
        .catch(err => {
          this.loading = false;
          this.$message.error("新闻详情加载失败，请稍后再试！");
        });
    },
    getCommList() {
      commList_user(this.pageLine)
        .then(res => {
          if (res.code == 0) {
            this.$message({
              type: "info",
              message: "评论加载失败"
            });
            this.commList = [];
          } else {
            this.commList = res.data;
            this.commCount = res.count;
          }
        })
        .catch(err => {
          this.loading = false;
          this.$message.error("评论加载失败，请稍后再试！");
        });
    },
    handleCurrentChange(parm) {
      this.pageLine.page = parm;
      this.getCommList();
    },
    addComm() {
      let userId = this.$store.getters["getuserInfo"].userId;
      if (!userId) {
        return;
      }
      if (!this.commBody) {
        this.$message({
          message: "评论内容帮你为空",
          type: "fail",
          duration: 500
        });
        return;
      }
      addComment_user({
        userId,
        newsId: this.newsId,
        commCom: this.commBody
      }).then(res => {
        if (res.code) {
          this.$message({
            message: "评论成功",
            type: "success",
            duration: 800
          });
          this.commBody = "";
          this.commList.unshift(res.data);
          this.commCount++;
        } else {
          this.$message({
            message: "评论失败",
            type: "fail",
            duration: 500
          });
        }
      });
    },
    fireCD() {
      // 配置参数（更多配置如下表）
      this.tiping = {
        text: "领取积分",
        color: "#fff"
      };
      this.tipend = {
        text: "已领取",
        color: "#fff"
      };
      // 启动倒计时(效果如上图所示)
      // 也支持：this.$refs.countDown.startCd()方式 启动倒计时
      this.fire++;
    },
    onEnd() {
      addWatch_user({
        userId: this.$store.getters["getuserInfo"].userId,
        newsId: this.newsId,
        newsIntegral: this.newsInfo.newsIntegral
      }).then(res => {
        if (res.code) {
          this.$message({
            message: "领取积分成功",
            type: "success",
            duration: 800
          });
          this.newsInfo.isWatch = true;
          this.newsInfo.newsWatch++;
        } else {
          this.$message({
            message: "领取积失败",
            type: "fail",
            duration: 500
          });
        }
      });
    }
  }
};
</script>

<style lang="scss">
@import url("../../../lib/css/mian.css");
.details {
  a {
    color: #333;
    text-decoration: none;
  }
  .container-wrap {
    margin: 0px auto 0;
    min-height: 100%;
    box-sizing: border-box;
  }
  .container {
    /* width: 750px; */
    margin: 0 auto;
    .item {
      margin-bottom: 60px;
      background: #fff;
      padding-top: 20px;
      .item-box {
        padding: 0 35px 60px;
        box-sizing: border-box;
        font-size: 14px;
        h3 {
          line-height: 36px;
          font-size: 20px;
          font-weight: 400;
        }
      }
      h5 {
        line-height: 38px;
        color: #a5a5a5;
        font-weight: 400;
      }
      p {
        line-height: 30px;
        padding-bottom: 10px;
        font-size: 14px;
        color: rgb(0, 0, 0);
        min-height: 200px;
      }
      .count {
        margin-top: 35px;
        color: #999999;
        cursor: pointer;
      }
    }
    .layui-clear {
      clear: both;
    }
    .icon {
      margin-right: 6px;
    }
  }
  .comt {
    height: 60px;
    line-height: 60px;
    margin-bottom: 60px;
    margin-top: 20px;
  }
  .LAY-msg-box {
    min-height: 400px;
    .info-item {
      margin-top: 35px;
      margin-bottom: 60px;
      display: flex;
      .info-img {
        width: 100px;
        height: 100px;
        margin-right: 20px;
        border-radius: 8px;
      }
      .info-text {
        flex: 1;
        .title {
          color: #999999;
          cursor: pointer;
          display: flex;
          justify-content: space-between;
          align-items: center;
          width: 100%;
          .name {
            line-height: 38px;
            color: #787878;
            font-size: 14px;
          }
          .like {
            color: #4b5a75;
            font-size: 14px;
            margin-right: 20px;
          }
          .icon {
            margin-right: 6px;
            font-size: 20px;
          }
        }
        .info-intr {
          line-height: 24px;
          font-size: 14px;
        }
      }
    }
  }
  .footerPage {
    text-align: center;
    margin: 40px auto;
  }
  .btn-comm {
    margin-top: 20px;
    text-align: center;
  }
  .headerInfo {
    display: flex;
    .userName {
      margin-left: 100px;
    }
  }
  .img-body {
    .img {
      height: 200px;
      width: 200px;
      margin: 20px;
    }
  }
  .down {
    position: fixed;
    bottom: 200px;
    right: 34px;
  }
}
</style>